{extend name="index/index" /}
{block name="main"}

<div class="content-page">
    <div class="content">
        <h1>{$title}</h1>
        <table width="800" border="1px solid #ccc">
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            {volist name="data" key="k" id="v" }
            <tr id="user{$v['id']}">
                <td>{$v['id']}</td>
                <td class="username">{$v['username']}</td>
                <td  id="rolename{$v['id']}">{:implode(' ',$v['rolename'])}</td>
                <td>
                    <button class="assign" data-target="#myModal" data-toggle="modal" data_id="{$v['id']}">分配角色</button>
                    <button  class="btn btn-danger btn-xs confirmDel" data-target="#confirm" data-toggle="modal"data_id="{$v['id']}">删除</button>
                    <button  class="btn btn btn-info btn-xs edit" data-toggle="modal" data-target="#myModal1" data_id="{$v['id']}">编辑</button>
                </td>
            </tr>
            {/volist}
        </table>

    </div>
</div>
<!--删除的模态框-->
<div class="modal fade hidd bs-example-modal-sm" id="confirm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">删除角色</h4>
            </div>
            <div class="checkbox" id="permission" style="">
                <p>您确定删除么?</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary del" data_id=" "  data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade hidd" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑管理员</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary tijiao"  data-user="" onclick="edit()" data-dismiss="modal">提交</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade hidd" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">分配角色</h4>
            </div>
            <div class="checkbox" id="roles" style="padding:20px">

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary "  data-user="" onclick="demo()" data-dismiss="modal">提交</button>
            </div>
        </div>
    </div>
</div>

<script src="/static/temp/assets/libs/jquery-3.3.1.min.js"></script>


<script>
    $('.confirmDel').click(function () {
        var id=$(this).attr('data_id');
        console.log(id);
        $(".del").attr("data_id",id);
    });

    $('.del').click(function() {
        var uid = $(this).attr('data_id');

        // $(".tijiao").attr("data-role",pid);
        // console.log(pid);
        // console.log(pid);
        $.ajax({
            method:'get',
            url: '/admin/user/del/' + uid,
            dataType: 'json',
            success:function (data) {

                $("#user"+data).remove();
            }
        });
    });

    $('.edit').click(function () {

        var uid = $(this).attr('data_id');
        $.ajax({
            method:'get',
            url: '/admin/user/edit/' + uid,
            dataType: 'json',
            success:function (data) {
                $('.modal-body').html('');

                $('.modal-body').append("<input type='hidden' name='id'  value="+data.id+" /><br>用户名 <input type='text' name='username'  value="+data.username+" /><br> ")
            }
        });

    });

    function edit() {
        var id = $(" input[ name='id' ] ").val();
        var username = $(" input[ name='username' ] ").val();

        // var data=[id,permission,controller,method];
        $.ajax({
            method: 'post',
            url: '/admin/user/doedit',
            datatype: 'json',
            data:{
                'id':id,
                'username':username,
            },
            traditional:true,
            success:function(data){
                $("#user"+data.id).children(".username").html(data.username);
                // $("#permission"+data.id).children(".permission").html(data.username);
            },
        });
    }



    $('.assign').click(function() {
        console.log('1111111111111');
        var uid = $(this).attr('data_id');
        assign(uid);

    });
       function assign(id) {

           console.log(id);
           $.ajax({
               method: 'get',
               url: '/admin/user/assignRoles/' + id,
               datatype: 'json',
               success: function (data) {
                   // $('#roles').append(data +'<br>');
                   var result = data.result;
                   var all = data.all;
                   var uid = data.uid;
                   $("#roles").html('');
                   console.log(all);
                   if(all.length>0){
                       modalHtml(all,result,$("#roles"),uid)
                   }
               },
               error: function () {
                   alert('请求失败');

               }
           });
       }

       function modalHtml(all,result,roles_box,uid){
           console.log(uid);
           $(".tijiao").attr("data-user",uid);
            for(var i=0;i<all.length;i++){
                str = "";
                for(var j=0;j<result.length;j++){
                    if(all[i].id==result[j].r_id){
                        str = "checked=checked";
                    }
                }


                roles_box.append("<input type='checkbox'  name='role' "+str+" value='"+all[i].id+"'/>"+all[i].rolename+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
            }
       }

        function demo(){
            var uid = $(".tijiao").attr('data-user');



            console.log(uid);
            var arr = [];
            $("input[name='role']:checked").each(function(i){
                arr[i] = $(this).val();
            });
            console.log(arr);
            str = JSON.stringify(arr).toString();
            $.ajax({
                method: 'post',
                url: '/admin/user/saveRole',
                datatype: 'json',
                data:{role:str,id:uid},
                traditional:true,
                success:function(data){
                        $("#rolename"+uid).html(data);
                }
            });


        }





</script>

{/block}
